<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水桶量水问题模拟器 - 带撤回功能</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        body {
            background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .container {
            max-width: 1000px;
            width: 100%;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        header {
            text-align: center;
            margin-bottom: 30px;
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 2.2rem;
            background: linear-gradient(45deg, #1a2a6c, #fdbb2d);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .description {
            color: #7f8c8d;
            font-size: 1.1rem;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }
        .problem {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 10px;
            margin: 20px 0;
            border-left: 4px solid #3498db;
        }
        .buckets-container {
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
            margin: 40px 0;
            flex-wrap: wrap;
        }
        .bucket {
            width: 180px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 15px;
        }
        .bucket-label {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 15px;
            color: #2c3e50;
        }
        .bucket-visual {
            width: 120px;
            height: 180px;
            border: 5px solid #3498db;
            border-bottom: 8px solid #2980b9;
            border-radius: 0 0 15% 15%;
            position: relative;
            overflow: hidden;
            background: #ecf0f1;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        .water {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: linear-gradient(to top, #1a2a6c, #3498db);
            transition: height 0.5s ease;
            border-radius: 5px 5px 0 0;
        }
        .bucket-info {
            margin-top: 15px;
            font-size: 1.1rem;
            text-align: center;
            color: #34495e;
            background: #f8f9fa;
            padding: 10px;
            border-radius: 8px;
            width: 100%;
        }
        .controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin: 30px 0;
        }
        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .btn-action {
            background: linear-gradient(to right, #3498db, #2980b9);
            color: white;
        }
        .btn-action:hover {
            background: linear-gradient(to right, #2980b9, #1a6ca0);
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }
        .btn-reset {
            background: linear-gradient(to right, #e74c3c, #c0392b);
            color: white;
        }
        .btn-reset:hover {
            background: linear-gradient(to right, #c0392b, #a23526);
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }
        .btn-undo {
            background: linear-gradient(to right, #f39c12, #e67e22);
            color: white;
        }
        .btn-undo:hover {
            background: linear-gradient(to right, #e67e22, #d35400);
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }
        .btn:disabled {
            background: #95a5a6;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        .history {
            margin-top: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        }
        .history h2 {
            color: #2c3e50;
            margin-bottom: 15px;
            text-align: center;
        }
        #steps {
            max-height: 200px;
            overflow-y: auto;
            padding: 10px;
        }
        .step {
            padding: 8px 12px;
            margin-bottom: 8px;
            background: #e9ecef;
            border-radius: 5px;
            border-left: 4px solid #3498db;
        }
        .current-step {
            background: #d4edda;
            border-left: 4px solid #28a745;
        }
        .success-message {
            text-align: center;
            color: #27ae60;
            font-weight: bold;
            font-size: 1.2rem;
            margin-top: 20px;
            padding: 15px;
            background: #d5f5e3;
            border-radius: 8px;
            display: none;
            animation: pulse 1.5s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        .hint {
            text-align: center;
            margin-top: 20px;
            padding: 15px;
            background: #fff3cd;
            border-radius: 8px;
            color: #856404;
            border-left: 4px solid #ffc107;
        }
        @media (max-width: 768px) {
            .buckets-container {
                flex-direction: column;
                align-items: center;
            }
            .controls {
                flex-direction: column;
                align-items: center;
            }
            .btn {
                width: 80%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>水桶量水问题模拟器（带撤回功能）</h1>
            <p class="description">
                使用4kg容量的小水桶和11kg容量的大水桶，通过填满、清空和互相倒水等操作，量出恰好5kg的水。
            </p>
            <div class="problem">
                <p><strong>问题：</strong>有两个水桶，小水桶能盛水4kg，大水桶能盛水11kg。问怎样用这两个水桶盛出5kg水？</p>
            </div>
        </header>

        <div class="buckets-container">
            <div class="bucket">
                <div class="bucket-label">小水桶</div>
                <div class="bucket-visual">
                    <div class="water" id="small-bucket-water" style="height: 0%;"></div>
                </div>
                <div class="bucket-info">
                    容量: 4kg<br>
                    当前水量: <span id="small-bucket-value">0</span>kg
                </div>
            </div>

            <div class="bucket">
                <div class="bucket-label">大水桶</div>
                <div class="bucket-visual">
                    <div class="water" id="large-bucket-water" style="height: 0%;"></div>
                </div>
                <div class="bucket-info">
                    容量: 11kg<br>
                    当前水量: <span id="large-bucket-value">0</span>kg
                </div>
            </div>
        </div>

        <div class="controls">
            <button class="btn btn-action" id="fill-small">填满小桶</button>
            <button class="btn btn-action" id="fill-large">填满大桶</button>
            <button class="btn btn-action" id="empty-small">清空小桶</button>
            <button class="btn btn-action" id="empty-large">清空大桶</button>
            <button class="btn btn-action" id="small-to-large">小桶倒入大桶</button>
            <button class="btn btn-action" id="large-to-small">大桶倒入小桶</button>
            <button class="btn btn-undo" id="undo" disabled>撤回上一步</button>
            <button class="btn btn-reset" id="reset">重置</button>
        </div>

        <div class="success-message" id="success-message">
            恭喜！您成功量出了5kg水！
        </div>

        <div class="hint">
            <strong>提示：</strong> 尝试先装满大水桶，然后将其倒入小水桶中，清空小水桶后重复此过程。
        </div>

        <div class="history">
            <h2>操作步骤</h2>
            <div id="steps">
                <div class="step current-step">请开始操作...</div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 水桶状态
            const buckets = {
                small: {
                    capacity: 4,
                    current: 0,
                    element: document.getElementById('small-bucket-value'),
                    waterElement: document.getElementById('small-bucket-water')
                },
                large: {
                    capacity: 11,
                    current: 0,
                    element: document.getElementById('large-bucket-value'),
                    waterElement: document.getElementById('large-bucket-water')
                }
            };

            const stepsContainer = document.getElementById('steps');
            const successMessage = document.getElementById('success-message');
            const undoButton = document.getElementById('undo');

            // 历史记录
            let history = [{
                small: 0,
                large: 0,
                description: "初始状态"
            }];
            let currentStep = 0;

            // 更新水桶显示
            function updateBucketDisplay() {
                for (const size in buckets) {
                    const bucket = buckets[size];
                    bucket.element.textContent = bucket.current;
                    bucket.waterElement.style.height = (bucket.current / bucket.capacity * 100) + '%';
                }

                // 检查是否成功
                if (buckets.small.current === 5 || buckets.large.current === 5) {
                    successMessage.style.display = 'block';
                } else {
                    successMessage.style.display = 'none';
                }

                // 更新撤回按钮状态
                undoButton.disabled = currentStep === 0;
            }

            // 添加步骤记录
            function addStep(action) {
                // 保存当前状态到历史
                currentStep++;
                history = history.slice(0, currentStep); // 移除可能的重做历史

                history.push({
                    small: buckets.small.current,
                    large: buckets.large.current,
                    description: action
                });

                // 更新显示
                renderSteps();
                updateBucketDisplay();
            }

            // 渲染步骤历史
            function renderSteps() {
                stepsContainer.innerHTML = '';

                history.forEach((step, index) => {
                    const stepElement = document.createElement('div');
                    stepElement.className = 'step';
                    if (index === currentStep) {
                        stepElement.classList.add('current-step');
                    }

                    let stepText = `步骤 ${index}: `;
                    if (index === 0) {
                        stepText = "初始状态: ";
                    }

                    stepText += `${step.description} (小桶: ${step.small}kg, 大桶: ${step.large}kg)`;
                    stepElement.textContent = stepText;
                    stepsContainer.appendChild(stepElement);
                });

                stepsContainer.scrollTop = stepsContainer.scrollHeight;
            }

            // 撤回上一步
            function undo() {
                if (currentStep > 0) {
                    currentStep--;
                    const prevState = history[currentStep];
                    buckets.small.current = prevState.small;
                    buckets.large.current = prevState.large;

                    renderSteps();
                    updateBucketDisplay();
                }
            }

            // 操作函数
            function fillSmall() {
                buckets.small.current = buckets.small.capacity;
                addStep('填满了小水桶 (4kg)');
            }

            function fillLarge() {
                buckets.large.current = buckets.large.capacity;
                addStep('填满了大水桶 (11kg)');
            }

            function emptySmall() {
                buckets.small.current = 0;
                addStep('清空了小水桶');
            }

            function emptyLarge() {
                buckets.large.current = 0;
                addStep('清空了大水桶');
            }

            function pourSmallToLarge() {
                const availableSpace = buckets.large.capacity - buckets.large.current;
                const amountToPour = Math.min(buckets.small.current, availableSpace);

                buckets.small.current -= amountToPour;
                buckets.large.current += amountToPour;

                addStep(`将小水桶中的 ${amountToPour}kg 水倒入大水桶`);
            }

            function pourLargeToSmall() {
                const availableSpace = buckets.small.capacity - buckets.small.current;
                const amountToPour = Math.min(buckets.large.current, availableSpace);

                buckets.large.current -= amountToPour;
                buckets.small.current += amountToPour;

                addStep(`将大水桶中的 ${amountToPour}kg 水倒入小水桶`);
            }

            function reset() {
                buckets.small.current = 0;
                buckets.large.current = 0;
                history = [{
                    small: 0,
                    large: 0,
                    description: "初始状态"
                }];
                currentStep = 0;
                renderSteps();
                successMessage.style.display = 'none';
                updateBucketDisplay();
            }

            // 添加事件监听器
            document.getElementById('fill-small').addEventListener('click', fillSmall);
            document.getElementById('fill-large').addEventListener('click', fillLarge);
            document.getElementById('empty-small').addEventListener('click', emptySmall);
            document.getElementById('empty-large').addEventListener('click', emptyLarge);
            document.getElementById('small-to-large').addEventListener('click', pourSmallToLarge);
            document.getElementById('large-to-small').addEventListener('click', pourLargeToSmall);
            document.getElementById('undo').addEventListener('click', undo);
            document.getElementById('reset').addEventListener('click', reset);

            // 初始化显示
            updateBucketDisplay();
        });
    </script>
</body>
</html>